<template>
  <!-- 客诉管理 -->
  <section class="page undistributed-case wit">
    <data-form :model="importModel" @onSearch="refreshData" :page="pageService" @handleResetForm="follFeedback">
      <template slot="inputs">
        <el-form-item label="客户号" prop="custNo">
          <el-input v-model="importModel.custNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="custName">
          <el-input v-model="importModel.custName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="投诉人类型" prop="complainPersonType">
          <el-select v-model="importModel.complainPersonType" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'ComplainPersonType'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="contractPhone">
          <el-input v-model="importModel.contractPhone" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="投诉来源" prop="complainSource">
          <el-select v-model="importModel.complainSource" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'ComplainSource'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投诉类型" prop="complainType">
          <el-select v-model="importModel.complainType" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'ComplainType'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker v-model="importModel.createTime" type="daterange" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="投诉人姓名" prop="complainPersonName">
          <el-input v-model="importModel.complainPersonName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="处理状态" prop="complainStatus">
          <el-select v-model="importModel.complainStatus" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'ComplainStatus'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最近处理人代号" prop="latestHandleNo">
          <el-input v-model="importModel.latestHandleNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="最近处理时间" prop="latestHandleTime">
          <el-date-picker v-model="importModel.latestHandleTime" type="daterange" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="登记流水号" prop="serialNo">
          <el-input v-model="importModel.serialNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="投诉模块" prop="complainModule">
          <el-select v-model="importModel.complainModule" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'ComplainModule'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投诉人员代号" prop="complainedPerson">
          <el-input v-model="importModel.complainedPerson" :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>

    <!-- <data-box
      :data="importDataSet"
      :selectionList.sync="selectionList"
      @onPageChange="refreshData"
      :page="pageService"
    > -->
    <data-box :data="importDataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="buttons">
        <el-button @click="getDetail('add')" v-auth="23398">登记客诉</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showOrEditQueue(scope.row.id, true, false, true)" v-auth="23403">查看</el-button>
            <!-- 只有待审批 不展示编辑 -->
            <!-- v-if="!scope.row.queueStatus || ['REJECT', 'PASS'].includes(scope.row.queueStatus)" -->
            <el-button :disabled="['OVER_Y','OVER_N'].includes(scope.row.complainStatus)" type="text" size="small" @click="showOrEditQueue(scope.row.id, false, true, true)" v-auth="23404">编辑</el-button>

          </template>
        </el-table-column>
        <el-table-column prop="serialNo" label="登记流水号" :min-width="$helper.getColumnWidth(12)" show-overflow-tooltip>
          <!-- <template slot-scope="scope">
            <a type="text" @click="openExecutionPage(scope.row)">{{
              scope.row.serialNo
            }}</a>
          </template> -->
        </el-table-column>
        <el-table-column prop="custNo" label="客户号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="custName" label="客户姓名" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="complainPersonType" label="投诉人类型" :formatter="row => $filter.dictConvert(row.complainPersonType, 'ComplainPersonType')" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="complainPersonName" label="投诉人姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="contractPhone" label="联系电话" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="complainSource" label="投诉来源" :formatter="row => $filter.dictConvert(row.complainSource, 'ComplainSource')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="complainType" label="投诉类型" :formatter="row => $filter.dictConvert(row.complainType, 'ComplainType')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="complainModule" label="投诉模块" :formatter="row => $filter.dictConvert(row.complainModule, 'ComplainModule')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="complainedPerson" label="投诉人员代号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" :formatter="row => $filter.dateFormat(row.createdTime)" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createPersonNo" label="创建人代号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="complainStatus" label="处理状态" :formatter="row => $filter.dictConvert(row.complainStatus, 'ComplainStatus')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="latestHandleNo" label="最近处理人代号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="latestHandleTime" label="最近处理时间" :formatter="row => $filter.dateTimeFormat(row.latestHandleTime)" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>

    <!--新增登记客诉弹出框-->
    <el-dialog :title="dialog.title1" :center="true" :visible.sync="dialog.add" width="900px" @open="$nextTick(() => $refs['add-customer'].reset())" :close-on-click-modal="false" :close-on-press-escape="false">
      <add-customer-litigation @close="dialog.add = false" @refreshList="refreshData" :readOnly="readOnly" :lookReadonly="lookReadonly" ref="add-customer"></add-customer-litigation>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { namespace, State } from "vuex-class";
// import { CaseInfoService } from "../../services/domain-service/case-info.service";
import { SynthesizeQueryService } from "../../services/domain-service/synthesize-query.service";
import { CustomerComplainService } from "../../services/domain-service/customer-complain.service";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import AddCustomerLitigation from "~/components/customer-litigation/add-customer-litigation.vue";

@Auth(2401)
@Layout("workspace")
@Component({
  components: { AddCustomerLitigation }
})
export default class CustomerLitigation extends Vue {
  @State
  public principalList: any;
  @Dependencies(PageService) private pageService: PageService;
  // @Dependencies(CaseInfoService) private CaseInfoService: CaseInfoService;
  @Dependencies(SynthesizeQueryService)
  private SynthesizeQueryService: SynthesizeQueryService;
  @Dependencies(CustomerComplainService) private CustomerComplainService: CustomerComplainService;
  private importModel: any = {
    custNo: "",
    custName: "",
    complainPersonType: "",
    contractPhone: "",
    complainSource: "",
    complainType: "",
    createTime: "",
    complainPersonName: "",
    complainStatus: "",
    latestHandleNo: "",
    latestHandleTime: "",
    serialNo: "",
    complainModule: "",
    complainedPerson: "",
  };
  private dialog: any = {
    add: false
  };
  private id: any = "";
  private readOnly = false;
  private edit = false;
  private lookReadonly = false;

  private importDataSet: any = [];
  private selectionList: any[] = [];

  private pickerOptions = {
    disabledDate (time) {
      return time.getTime() > Date.now();
    },
  }

  private paramsHandler () {
    const params = { ...this.importModel };
    params.createBeginTime = this.importModel.createTime[0];
    params.createEndTime = this.importModel.createTime[1];
    params.handleBeginTime = this.importModel.latestHandleTime[0];
    params.handleEndTime = this.importModel.latestHandleTime[1];
    return params;
  }

  /**
   * 获取待分配案件
   */
  private refreshData () {
    const request: any = { ...this.paramsHandler() }
    this.CustomerComplainService.getCustomerComplainList(request, this.pageService).subscribe(res => {
      console.log('!res', !res)
      if (!res) { res = [] }
      this.importDataSet = res
      console.log("this.importDataSet", this.importDataSet);
      this.selectionList = [];
    })
  }

  private mounted () {
    this.refreshData();
  }

  private getDetail (add) {
    this.dialog.add = true
    this.dialog.title1 = "登记投诉"
    this.readOnly = false;
    this.edit = false;
    this.lookReadonly = false;
  }

  //查看编辑客诉
  private showOrEditQueue (id, readOnly, edit, lookReadonly) {
    this.id = id;
    // this.pithyFlag = false;
    this.readOnly = readOnly;
    this.edit = edit;
    this.dialog.add = true;
    this.lookReadonly = lookReadonly;
    this.dialog.title1 = edit ? "编辑客诉" : "查看客诉";
    this.$nextTick(async () => {
      const addCustomer: any = this.$refs["add-customer"];
      await addCustomer.queueIdChange(this.id); // 队列修改记录 - 详情查看
      if (edit) {
        addCustomer.clearSomeInfo()
      }
    });
  }

  /**
   * 手动分案
   */
  private manualDistruibute () {
    // if (this.selectionList.length === 0) {
    // this.$message("请选择要分配的案件");
    // this.dialog.manual = true;
    // } else {
    //     this.dialog.manual = true;
    // }
  }

  /**
   * 重置numberRange
   */
  private follFeedback () {
    // this.importModel.amountRange = { min: "", max: "" };
    // this.importModel.dayRange = { min: "", max: "" };
    // this.importModel.rateRange = { min: "", max: "" };
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage (row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Case_await,
      hiddenAction: false,
      hiddenRemark: true
    });
  }
  /**
   * 导出案件
   */
  private exportCaseInfo () {
    const ids = this.selectionList.map(v => v.id);
    const request: any = {
      ...this.importModel,
      caseIds: ids
    };
    // this.CaseInfoService.distributeCaseInfosExport(request).subscribe(data =>
    //   this.$common.downloadFile(data.url)
    // );
  }

  /**
   * 导出催记
   */
  private exportFollowup () {
    const ids = this.selectionList.map(v => v.id);
    const request: any = {
      ...this.importModel,
      caseIds: ids
    };
    // this.CaseInfoService.distributeCaseInfosExportFollow(request).subscribe(data => this.$common.downloadFile(data.url)
    // );
  }
}
</script>

<style lang="less">
.wit .el-form-item > label {
  width: 100px !important;
}
</style>
